
<template>
  <div>
    <div class="search">
      <el-input placeholder="请输入查询" style="width: 200px" v-model="searchValue"></el-input>
    </div>


    <div class="table">
      <el-table :data="tableData" strip @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" label="序号"  align="center" sortable></el-table-column>
        <el-table-column label="订单号" width="120" prop="orderId"></el-table-column>
        <el-table-column label="入住人" width="80" prop="peopleList[0].realName"></el-table-column>
        <el-table-column label="手机号" width="100" prop="peopleList[0].phone"></el-table-column>
        <el-table-column label="身份证" width="140" prop="peopleList[0].sdcard"></el-table-column>
        <el-table-column prop="hotelInfo.name" width="150" label="店铺名称"></el-table-column>
        <el-table-column prop="roomList[0][0].roomName" width="150" label="房型名称"></el-table-column>
        <el-table-column prop="roomList[0][0].price" label="单价"></el-table-column>
        <el-table-column  label="入住时长">
          <template v-slot="scope">
            {{scope.row.nights}}晚
          </template>
        </el-table-column>
        <el-table-column prop="startDate" width="100" label="入住时间"></el-table-column>
        <el-table-column prop="endDate" width="100"  label="结束时间"></el-table-column>
        <el-table-column prop="createTime" width="160" label="下单时间">
          <template v-slot="scope">
           {{moment(scope.row.createTime).format("YYYY-MM-DD hh:mm:ss")}}
          </template>
        </el-table-column>
        <el-table-column  fixed="right" label="操作" align="center" width="170">
          <template v-slot="scope">
            <div style="display: flex;justify-content: center;width: 100%">
              <el-button size="mini" :type="scope.row.status*1===1?'warning':scope.row.status*1===2 ?'primary':scope.row.status*1===3?'success':'primary'"
                         :disabled="scope.row.status==='5'"
                         plain @click="updateOrderFun(scope.row)">
                {{entryStatusFun(scope.row.status)}}
              </el-button>
              <div style="margin-left: 10px">
                <el-popconfirm
                    title="这是一段内容确定删除吗？"
                    @confirm="deleteItemFun(scope.row.id)"
                >
                  <el-button size="mini" type="danger" slot="reference" >删除</el-button>
                </el-popconfirm>
              </div></div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
        </el-pagination>
      </div>
    </div>

    <el-dialog title="入住信息" :visible.sync="dialogFormVisible" width="450">
      <el-form :model="form" label-width="450">
        <el-form-item label="预定房型" label-width="650">
          <div style="display:flex; justify-content: space-between ;">
            <div >
              <el-input
                  placeholder="预定房型"
                  disabled
                  v-model="form.hotelInfo.name"
                  style="width: 220px">
              </el-input>
            </div>
            <div style="display: flex">
              <label style="width: 65px">房型单价</label>
              <el-input
                  placeholder="房型单价"
                  disabled
                  v-model="form.price"
                  style="width: 205px">
              </el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="入住时间" label-width="450">
          <div style="display:flex;justify-content: space-between">
            <el-date-picker
                disabled
                v-model="form.startDate"
                type="date"
                placeholder="入住时间">
            </el-date-picker>

            <div>
              <label style="margin: 0 10px 0 0">入住时长</label>
              <el-select v-model="form.nights"  disabled placeholder="请选择入住时长" >
                <el-option  v-for="item in 30" :label="item+'晚'" :value="item"></el-option>
              </el-select>
            </div>
          </div>
        </el-form-item>
        <el-form-item label-width="450" :label="'入 住 人'+(index+1)"  v-for="(item,index) in form.peopleList">
          <div style="display: flex" >
            <el-input placeholder="预定人" :disabled="!dialogBtnShow" maxlength="5" v-model="item.realName"></el-input>
            <el-input placeholder="预定人手机号" :disabled="!dialogBtnShow"
                      style="margin: 0 5px 0 5px"
                      maxlength="11"
                      v-model="item.phone"></el-input>
            <el-input placeholder="预定身份证号" :disabled="!dialogBtnShow"
                      maxlength="18"
                      v-model="item.sdcard"></el-input>
            <el-button v-if="dialogBtnTitle==='办理入住'" style="margin-left: 5px" @click="deleteFun(index)"
                       type="danger" icon="el-icon-delete">
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="总价金额" label-width="450">
          <div style="display:flex; justify-content: space-between">
            <div>
              <el-input v-model="form.price*form.nights||0"
                        placeholder="总价"
                        disabled style="width: 220px">
              </el-input>
            </div>
            <div style="display: flex" v-if="dialogBtnTitle==='办理入住'">
              <label style="width: 65px">添加人员</label>
              <el-button size="small"
                         type="primary" icon="el-icon-circle-plus"
                         style="width: 205px" @click="addHunmFun()">添加入住人</el-button>
            </div>
          </div>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top: -50px">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button  v-if="dialogBtnShow" type="primary" @click="updateOrderFun2()">{{dialogBtnTitle}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {deleteOrder, queryOrderPage, updateOrder} from "@/Interface/OrderApi";
import moment from "moment";
import {queryDictItem} from "@/Interface/DictApi";
import {backLogin, dictStatus} from "@/Config/Tool";

export default {
  name: "Hotel",
  computed: {
    moment() {
      return moment
    }
  },
  watch:{
    searchValue(newValue,oldValue){
      if (newValue){
        this.tableData=[];
        queryOrderPage({
          limit:1000,
          page:1,
          param:{}
        }).then(res=>{
          if (res.code===200){
            const result = res.data.records.filter(item => {
              return Object.values(item).some(val => val?.toString().includes(newValue));
            });
            this.tableData= result;
          }
        })

      }else {
        this.queryOrderPageFun();
      }
    }
  },
  data() {
    return {
      searchValue:"",
      dialogFormVisible:false,
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      username: null,
      fromVisible: false,
      dict2:[],
      dict3:[],
      dict4:[],
      dict5:[],
      dict6:[],
      dict7:[],
      dialogBtnTitle:'办理入住',
      dialogBtnShow:true,
      form: {
        hotelInfo:{
          name:null
        }
      },
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      rules: {
        username: [
          {required: true, message: '请输入账号', trigger: 'blur'},
        ]
      },
      ids: []
    }
  },
  created() {
    backLogin("ADMIN")
  this.queryOrderPageFun();
  this.queryDictItemFun([2]);
  },
  methods: {
    dictStatus,
    /**
     * 查询订单数据
     * @param pageNum
     */
    queryOrderPageFun(){
      queryOrderPage({
        limit:this.pageSize,
        page:this.pageNum,
        param:{}
      }).then(res=>{
        if (res.code===200){
          this.tableData=res.data.records;
          this.total=res.data.total;
        }
      })
    },
    /**
     * 删删除
     */
    deleteItemFun(id){
      deleteOrder({id:id}).then(res=>{
        if (res.code===200){
          this.queryOrderPageFun();
          this.$message.success(res.msg);
        }else {
          this.$message.error(res.msg)
        }
      })
    },
    /**
     * 查询字典值
     */
    queryDictItemFun(e){
      e.forEach(item=>{
        queryDictItem({id:item}).then(res=>{
          switch (item){
            case 2:
              this.dict2 = res.data;
              break;
            case 3:
              this.dict3 = res.data;
              break;
            case 4:
              this.dict4 = res.data;
              break;
            case 5:
              this.dict5 = res.data;
              break;
            default:
              this.dict4 = res.data;
              break;
          }
        })
      })
    },
    /**
     * 更新数据
     */
    updateOrderFun(e){
      if (e.status*1===1){
        this.dialogBtnTitle="办理入住";
        this.dialogBtnShow=true;
        this.form=e;
        if (!this.form.hotelInfo.name){
          this.form.hotelInfo.name=e.hotelInfo.name;
        }
        this.dialogFormVisible=true;
      }else if(e.status*1>=6){
        this.form=e;
        this.dialogBtnShow=false;
        this.dialogBtnTitle="查看详情"
        this.dialogFormVisible=true;
      }else {
        updateOrder({id:e.id,status:e.status*1+1}).then(res=>{
          if(res.code===200){
            this.queryOrderPageFun();
            this.$message.success(res.msg);
          }else {
            this.$message.error(res.msg)
          }
        })
      }

    },
    /**
     * 办理入住
     */
    updateOrderFun2(){
        let {id,peopleList} = this.form;
        updateOrder({id,peopleList,status:2}).then(res=>{
          if(res.code===200){
            this.queryOrderPageFun();
            this.dialogFormVisible=false;
            this.$message.success(res.msg);
          }else {
            this.$message.error(res.msg)
          }
        })
    },
    /**
     * 添加人员
     */
    addHunmFun(){
      this.form.peopleList.push({
        realName:"",
        sdcard:"",
        phone:""
      })
    },
    /**
     * 删除人员
     */
    deleteFun(index){
      this.form.peopleList.splice(index,1);
    },
    /**
     * 分页
     */
    handleSelectionChange(e){
      console.log("handleSelectionChange",e)
    },
    handleCurrentChange(pageNum) {
      this.pageNum=pageNum;
    },
    /**
     * 入住状态
     */
    entryStatusFun(e){
       let name =dictStatus(this.dict2,e);
      return name
    },
  }
}
</script>

<style scoped>

</style>
